<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<link rel="stylesheet" href="/jeecg/plug-in/layui/css/layui.css">
<style>
    body .layim-chat-main {
        height: auto;
    }
</style>
<div class="layim-chat-main">
    <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div
            class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div
            class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


<script src="/jeecg/plug-in/layui/layui.js"></script>
<script>
	layIM = new Object(), 
	layIM.custom = new Object(), 
	layIM.custom.config = new Object();
	layIM.custom.config.chatWsIp = "localhost:8080/jeecg";
	layIM.custom.config.chatIp = "http://" + layIM.custom.config.chatWsIp;
	layIM.custom.config.websocketIp = "ws://" + layIM.custom.config.chatWsIp 
		+ "/WebSocket/" + layIM.custom.config.currentId;
	layIM.custom.config.currentId = "";
	
	function addFrom(item) {
		var aa = '<li class="layim-chat-mine"><div class="layim-chat-user"><img src="' + item.avatar 
			+ '"><cite><i>' + layui.data.date(item.timestamp) + '</i>' + item.username 
			+ '</cite></div><div class="layim-chat-text">' + layui.layim.content(item.content) + '</div></li>';
		return aa;
	}
	
	function addTo(item) {
		var aa = '<li><div class="layim-chat-user"><img src="' + item.avatar 
			+ '"><cite><i>' + layui.data.date(item.timestamp) + '</i>' + item.username 
			+ '</cite></div><div class="layim-chat-text">' + layui.layim.content(item.content) + '</div></li>';
		return aa;
	}

    layui.use(['layim', 'laypage'], function () {
        var layim = layui.layim
                , layer = layui.layer
                , laytpl = layui.laytpl
                , $ = layui.jquery
                , laypage = layui.laypage;
        //开始请求聊天记录
        var param = location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭
                ,data=function () {

        }
        console.log(param)
        jQuery.ajax({
            url: layIM.custom.config.chatIp + '/chat/chatMessageHistory.do?getHistoryMessage&from=${from}&to=${to}&type=${type}',
            success: function (res) {
                var resJson = JSON.parse(res);
                var objArray = resJson.obj;
                var items = new Array();
                for (var i = 0; i < objArray.length; i++) {
                    items[i] = JSON.parse(objArray[i].data).mine;
                    items[i]["timestamp"]=objArray[i].createDate;

    }
                console.log(items)
                /*var html = laytpl(LAY_tpl.value).render({
                    data:items
                });*/
                
                var html = "";
                
                for(var i in items) {
                	if (items[i].id == "${from}") {
                		html += addFrom(items[i]);
                	} else {
                		html += addTo(items[i]);
                	}
                }
                
                /*
                var aaa = "${from}";
                var bbb = "${to}";
                
                window.alert(aaa);
                window.alert(bbb);*/

                $('#LAY_view').html(html);
            }
        });
    });
</script>